<template>
  <el-dialog center :title="title" :visible.sync="innerVisible">
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="model" label-width="100px">

          <Portlet title="菜单信息">
            <el-row>
              <el-col :span="24">
                <el-form-item label="上级菜单" prop="pid" :rules="[
                  {required: true, message: '上级菜单必须', trigger: 'change'}
                ]">
                  <tree-select
                    :data="hasRootMenuData"
                    v-model="model.pid"
                  >
                  </tree-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="菜单名称" prop="name" :rules="[
                  {required: true, message: '菜单名称必须', trigger: 'blur'}
                ]">
                  <el-input v-model="model.name" placeholder="菜单名称"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="功能链接" prop="pageUrl" :rules="[
                {required: true, message: '功能链接必须', trigger: 'blur'}
              ]">
                  <el-input v-model="model.pageUrl" placeholder="菜单名称"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="是否隐藏" prop="hidden" :rules="[
                {required: true, message: '是否隐藏必须', trigger: 'change'}
              ]">
                  <el-switch
                    v-model="model.hidden"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="是"
                    inactive-text="否">
                  </el-switch>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="图标class名" prop="iconId" :rules="[
                {required: true, message: '图标class名必须', trigger: 'change'}
              ]">
                  <el-input v-model="model.iconId" placeholder="图标class名">
                    <i slot="suffix" :class="model.iconId"></i>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </Portlet>

          <Portlet title="权限信息" v-for="(item, index) in trueAuthorityBeans" :key="index">
            <el-row slot="header">
              <el-col :span="16">
                权限信息
              </el-col>

              <el-col :span="8" style="text-align: right">
                <el-button type="text" href="javascript:;" @click.prevent="delAuth(item)" class="font-red">
                  <i class="fa fa-trash"></i> 删除
                </el-button>

                <el-button type="text" @click.prevent="plusAuth" v-if="trueAuthorityBeans.length === (index + 1)" href="javascript:;"
                   class="font-light-blue">
                  <i class="fa fa-plus"></i> 添加
                </el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="权限名称" :prop="'authorityBeans.' + index + '.name'" :rules="[
                    {required: true, message: '权限名称必须', trigger: 'change'}
                  ]">
                  <el-input v-model="item.name" placeholder="权限名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="数据权限">
                  <el-input v-model="item.conditions" placeholder="数据权限"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="对应接口">
                  <el-input v-model="item.url" placeholder="对应接口"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </Portlet>
          <Portlet title="权限信息" v-if="trueAuthorityBeans.length == 0">
            <el-button @click.prevent="plusAuth">添加权限</el-button>
          </Portlet>
        </el-form>
        <el-row>
          <el-col :span="24" class="text-center" style="margin-top: 10px;">
            <el-button type="primary" @click.prevent="makeSure" :loading="loading">
              {{id ? '保存' : '新增'}}
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import {dotData, copy, confirm} from '@/utils'
export default {
  name: 'storageModal',
  props: {
    pid: {
      type: String,
      default: ''
    },
    menuData: {
      type: Array,
      required: true
    },
    projectType: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      loading: false,
      model: {
        id: '',
        pid: '',
        name: '',
        iconId: '',
        authorityBeans: [],
        hidden: 0,
        pageUrl: '',
        projectType: this.projectType
      },
      id: '',
      userProjectTypes: []
    }
  },
  computed: {
    title() {
      return this.model.id ? '编辑菜单' : '新增菜单'
    },
    // 后端要求删除的数据只是清空，要id
    trueAuthorityBeans() {
      return this.model.authorityBeans.filter(v => v.status !== -1)
    },
    hasRootMenuData() {
      return [{id: '0', value: '0', text: '根菜单', children: this.menuData}]
    }
  },
  methods: {
    makeSure() {
      this.$refs.form.validate().then(result => {
        if (!result) {
          return
        }
        this.loading = true
        let data = copy(this.model, true)
        if (this.model.id) {
          data.operate = 'edit'
        } else {
          data.operate = 'add'
        }
        // 为后端处理 删除了的数据还是要id
        if (Array.isArray(data.authorityBeans)) {
          data.authorityBeans = data.authorityBeans.filter(v => v.status === -1).map(v => {
            return {id: v.id}
          })
        }
        this.$ajax.post('/ms-common-user/menu/saveUpdateMenu', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.loading = false
            this.$emit('refresh', true)
            confirm('操作成功', '提示', {
              type: 'success',
              closeOnClickModal: false
            }).finally(_ => {
              this.innerVisible = false
            })
          }
        }).finally(_ => {
          this.loading = false
        })
      })
    },
    show(id) {
      this.innerVisible = true
      this.model.authorityBeans = []
      this.$nextTick(_ => {
        if (id) {
          this.model.id = id
          this.$ajax.get('/ms-common-user/menu/getMenuById', {id}).then(response => {
            this.model.name = dotData(response.data, 'orgMenu.name')
            this.model.iconId = dotData(response.data, 'orgMenu.iconId')
            this.model.pageUrl = dotData(response.data, 'orgMenu.pageUrl')
            this.model.hidden = parseInt(dotData(response.data, 'orgMenu.hidden')) || 0
            this.model.pid = dotData(response.data, 'orgMenu.parentId')
            this.model.projectType = dotData(response.data, 'orgMenu.projectType')
            const orgDataFunctions = dotData(response.data, 'orgDataFunctions')
            if (Array.isArray(orgDataFunctions)) {
              this.model.authorityBeans = orgDataFunctions
            }
          })
        } else {
          // 新增
          this.model.id = ''
          this.$nextTick(_ => {
            if (this.$refs.form) {
              this.$refs.form.resetFields()
            }
            // 设置pid
            if (this.pid || this.pid === 0) {
              this.model.pid = this.pid
            }
          })
        }
      })
    },
    hide() {
      this.innerVisible = false
    },
    // 添加全选
    plusAuth() {
      this.model.authorityBeans.push({})
    },
    // 新增权限
    delAuth(item) {
      this.$set(item, 'status', -1)
    }
  }
}
</script>
